<template>
  <div v-if="!item.meta || !item.meta.hidden"
       class="sidebar-item-container">
    <!-- 一个路由下只有一个子路由的时候 只渲染这个子路由 -->
    <template v-if="theOnlyOneChildRoute && isRenderSingleRoute">
      <sidebar-item-link v-if="theOnlyOneChildRoute.meta"
                         :to="resolvePath(theOnlyOneChildRoute.path)">
        <el-menu-item :index="resolvePath(theOnlyOneChildRoute.path)">
          <i v-if="icon&& icon.includes('el-icon')"
             :class="icon"></i>
          <svg-icon v-else-if="icon"
                    class="menu-icon"
                    :icon-class="icon"></svg-icon>
          <template #title>
            <span>{{ theOnlyOneChildRoute.meta.title }}</span>
          </template>
        </el-menu-item>
      </sidebar-item-link>
    </template>
    <!-- 多个子路由时 -->
    <el-submenu v-else
                :index="resolvePath(item.path)"
                popper-append-to-body>
      <template #title>
        <svg-icon v-if="item.meta.icon"
                  class="menu-icon"
                  :icon-class="item.meta.icon"></svg-icon>
        <span class="submenu-title">{{ item.meta.title }}</span>
      </template>
      <sidebar-item v-for="child in item.children"
                    :key="child.path"
                    :is-nest="true"
                    :item="child"
                    :base-path="resolvePath(child.path)">
      </sidebar-item>
    </el-submenu>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, toRefs } from 'vue'
// import { RouteRecordRaw } from 'vue-router'
import path from 'path'
import SidebarItemLink from './SidebarItemLink.vue'
import { isExternal } from '@/utils/validate'
import { MenuItemRouter } from '@/router/type'

export default defineComponent({
  name: 'SidebarItem',
  components: {
    SidebarItemLink
  },
  props: {
    item: {
      // 当前路由
      require: true,
      type: Object as PropType<MenuItemRouter>
    },
    basePath: {
      // 父路由路径
      type: String,
      required: true
    }
  },
  setup(props) {
    const { item } = toRefs(props)
    // console.log(item)
    // 由于路由配置的一级都是layout（后续可以考虑修改），所以渲染菜单主要看子路由children
    // 子路由数量
    const showingChildNumber = computed(() => {
      const children = (props.item?.children || []).filter((child) => {
        if (child.meta?.hidden) return false
        return true
      })
      return children.length
    })
    //
    const theOnlyOneChildRoute = computed(() => {
      // 多个children时 直接return null 多children需要用el-submenu来渲染并递归
      if (showingChildNumber.value > 1) {
        return null
      }
      // children中只有一个子路由时，刷选出meta。hideden为false的才渲染
      if (item?.value?.children) {
        for (const child of item.value.children) {
          if (!child.meta?.hidden) {
            return child
          } // ??有啥用？？
        }
      }
      // 没找到路由的可渲染菜单时，把当前路由的item作为仅有的子路由渲染
      return {
        meta: { icon: '' }, // ??识别不到item中的meta属性？？？
        ...props.item,
        path: '' // ???
        // noShowingChildren: true
      } as MenuItemRouter
    })
    // 是否有可渲染子路由
    const noShowingChildren = computed(() => showingChildNumber.value === 0)
    // menu icon
    const icon = computed(() => {
      // 子路由如果没有icon就用父路由的，
      return (theOnlyOneChildRoute?.value?.meta?.icon ||
        props?.item?.meta?.icon) as string
      // return props?.item?.meta?.icon
    })
    // 利用path.resolve 根据父路径+子路径 解析成正确路径 子路径可能是相对的
    // resolvePath在模板中使用
    const resolvePath = (childPath: string) => {
      // 如果是带协议外链 直接返回
      if (isExternal(childPath)) {
        console.log('external:', childPath)
        return childPath
      }
      // 如果不是外链 需要和basePath拼接
      return path.resolve(props.basePath, childPath)
    }
    // 路由设置alwaysShow:true,就会忽略theOnlyOneChildRoute规则，一直显示父路由
    const alwaysShowRootMenu = computed(() => props.item?.meta?.alwaysShow)
    const isRenderSingleRoute = computed(() => !(alwaysShowRootMenu.value) && ((!theOnlyOneChildRoute.value?.children || noShowingChildren.value)))
    console.log(props.item, isRenderSingleRoute.value)
    return {
      theOnlyOneChildRoute,
      icon,
      resolvePath,
      isRenderSingleRoute
    }
  }
})
</script>
<style lang="scss">
.sidebar-item-container {
  .menu-icon {
    margin-right: 16px;
    margin-left: 5px;
    vertical-align: middle;
  }
}
</style>
